<template>
  <div class="item-bg fuel">
    <div class="on-off">    
      <div v-for="(status, index) in statuss" :key="index" class="valve-container">
        <div :class="[`status${status.id}`]">
          <div class="status">
            <!-- 开按钮 -->
            <div class="default"
                :class="{ 
                  'active': status.openPosition && !status.openAlarm,
                  'alarm': status.openAlarm
                }"
                @click="() => openSwitch(status)">
              开
            </div>
            <!-- 关按钮 -->
            <div class="default"
                :class="{ 
                  'active': status.closePosition && !status.closeAlarm,
                  'alarm': status.closeAlarm
                }"
                @click="() => offSwitch(status)">
              关
            </div>
            <!-- 停按钮 -->
            <div class="default" @click="() => stopSwitch(status)">
              停
            </div>
          </div>


          <!-- 箭头绑定 -->
          <div
            v-if="!status.closePosition"
            class="flashing-arrow"
            :style="{
              top: status.arrow.y + 'px',
              left: status.arrow.x + 'px',
              transform: `rotate(${status.arrow.direction}deg)`,
              width: status.arrow.length + 'px'
            }"
          >
          </div>
        </div>
      </div>
      <div v-for="(fuwei, index) in fuweis" :key="index">
        <div :class="[`fuwei${fuwei.id}`]">
          <div class="status">
            <div
                  class="default1"
                  @click="() => openSwitchfuwei(fuwei)"
                >
                复位
            </div>
          </div>
        </div>
      </div>
      <!-- 弹窗 -->
      <div v-if="isPopupVisible" class="popup">
        操作成功
      </div>
      <!--模拟量显示-->
      <div class="simulate-value" v-for="(simulateValue, index) in simulateValues" :key="index" :class="`simulate-value${simulateValue.id}`" :style="{ color: simulateValue.color}">
        {{ simulateValue.value }}
      </div>
      <div class="hight_water1">
      注水口
      </div>
      <div class="hight_water2">
      注水口
      </div>
      <div class="hight_water3">
      进气口
      </div>
      <div class="hight_water4">
      进气口
      </div>
      <div class="hight_water5">
      主供水
      </div>
      <div class="hight_water6">
      主回水
      </div>
      <!--模拟量可控设备 -->
      <div v-for="(controlValue, index) in controlValues" 
       :key="index" 
       :class="`simulate-value${controlValue.id}`"
       @click="() => openModal(controlValue)">
        给定：{{ controlValue.value || '0' }}
      </div>
    </div>
    <div v-if="isModalOpen" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <input id="contextNumber" class="content" v-model="inputValue" placeholder="请输入内容" />
        <button class="but" @click="parameterSettings">确定</button>
      </div>
    </div>
    <div class="level-meter">
      <div class="meter-container">
        <!-- 液位计的内容 -->
        <!-- 最高液位 -->
        <div class="level-limit top-limit">{{ maxLevel }} mm</div>

        <!-- 液位条 -->
        <div class="level-bar" :style="{ height: `${level}%`, bottom: '0' }"></div>

        <!-- 当前液位指示器 -->
        <div class="level-indicator" :style="{ bottom: `${level}%`,color: currentLevel.color }" >{{ currentLevel.level }} mm</div>

        <!-- 最低液位 -->
        <div class="level-limit bottom-limit">{{ minLevel }} mm</div>
      </div>
  </div>
      <div class="tem-meter">
        <div class="tem-container">
          <!-- 温度计的内容 -->
          <!-- 最高液位 -->
          <div class="tem-limit top-limit">{{ maxtem }} ℃</div>

          <!-- 液位条 -->
          <div class="tem-bar" :style="{ height: `${tem}%`, bottom: '0' }"></div>

          <!-- 当前液位指示器 -->
          <div class="tem-indicator" :style="{ bottom: `${tem}%`, color: currenttem.color }">{{ currenttem.temperature }} </div>

          <!-- 最低液位 -->
          <div class="tem-limit bottom-limit">{{ mintem }} ℃</div>
        </div>

    </div> 
    <div class="level-meter-right">
      <div class="meter-container-right">
        <!-- 液位计的内容 -->
        <!-- 最高液位 -->
        <div class="level-limit-right top-limit-right">{{ maxLevel }} mm</div>

        <!-- 液位条 -->
        <div class="level-bar-right" :style="{ height: `${level1}%`, bottom: '0' }"></div>

        <!-- 当前液位指示器 -->
        <div class="level-indicator-right" :style="{ bottom: `${level1}%`,color: currentLevel1.color }" >{{ currentLevel1.level }} mm</div>

        <!-- 最低液位 -->
        <div class="level-limit-right bottom-limit-right">{{ minLevel }} mm</div>
      </div>
  </div>
      <div class="tem-meter-right">
        <div class="tem-container-right">
          <!-- 温度计的内容 -->
          <!-- 最高液位 -->
          <div class="tem-limit-right top-limit-right">{{ maxtem }} ℃</div>

          <!-- 液位条 -->
          <div class="tem-bar-right" :style="{ height: `${tem1}%`, bottom: '0' }"></div>

          <!-- 当前液位指示器 -->
          <div class="tem-indicator-right" :style="{ bottom: `${tem1}%`, color: currenttem.color }">{{ currenttem1.temperature }} </div>
          <!-- 最低液位 -->
          <div class="tem-limit-right bottom-limit-right">{{ mintem }} ℃</div>
        </div>
    </div>
    <div id="confirmModal" style="display: none;" class="modal-overlay">
      <div class="modal-content">
        <p></p>
        <div class="modal-buttons">
          <button id="confirmYes">确认</button>
          <button id="confirmNo">取消</button>
        </div>
      </div>
    </div>
    <el-dialog
      v-for="(warn, index) in activeWarnings"
      :key="`${warn.id}-${warn.type}-${index}`"
      v-model="warn.visible"
      :title="`警告 - ${warn.deviceName} ${labelMap[warn.type]}信号`"
      :modal-class="'custom-warning-dialog'"
      width="400px"
      draggable
      :show-close="false"
      :style="{ 
        top: `${warn.topOffset}px`, 
        left: warn.leftOffset 
      }"
    >
    <!--   <span>检测到 {{ warn.deviceName }} 报警：{{ labelMap[warn.type] }} 信号</span> -->
      <template #footer>
        <el-button
          @click="removeDialog(warn)"
          style="background-color: #000; color: white; border: none"
        >
          关闭
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<style src="../image.css"></style>
<script setup>
import { ref, computed,reactive } from 'vue';
import initData from "../../initData"
const { socket } = initData(true);
import bus from '../../utils/bus';
const msg = ref('');
const idDevice = ref('');
const isModalOpen = ref(false)
const inputValue = ref('')
const selectedControl = ref(null)

// 当前液位
const currentLevel = ref({
  level: 1000, // 初始温度
  color: 'blue'    
});
const currentLevel1 = ref({
  level: 1000, // 初始温度
  color: 'blue'    
});
// 量程和液位限制
const minLevel = 0;
const maxLevel = 2800;

// 当前温度值
const currenttem = ref({
  temperature: 10, // 初始温度
  color: 'blue'    // 初始颜色
});
const currenttem1 = ref({
  temperature: 10, // 初始温度
  color: 'blue'    // 初始颜色
});
// 量程和液位限制
const mintem = 0;
const maxtem = 100;

// 计算液位的百分比，用来表示液位条的高度
const level = computed(() => {
  return ((currentLevel.value.level - minLevel) / (maxLevel - minLevel)) * 100;
});

// 计算液位的百分比，用来表示液位条的高度
const level1 = computed(() => {
  return ((currentLevel1.value.level - minLevel) / (maxLevel - minLevel)) * 100;
});

// 计算温度的百分比，用来表示液位条的高tem度
const tem = computed(() => {
  return ((currenttem.value.temperature - mintem) / (maxtem - mintem)) * 100;
});

// 计算温度的百分比，用来表示液位条的高tem度
const tem1 = computed(() => {
  return ((currenttem1.value.temperature - mintem) / (maxtem - mintem)) * 100;
});


const openModal = (valve) => {
  selectedControl.value = valve
  inputValue.value = valve.value // 直接访问值
  idDevice.value = valve.id.toString()
  isModalOpen.value = true
}



function closeModal() {
  isModalOpen.value = false
}
//复位
const fuweis = ref([
  { id: 0,  },
]);
// 创建阀门的初始状态
const statuss = ref([
  { id: 0, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: -45, y: 40, direction: 270 , length: 50}},
  { id: 2, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: 102, y: 40, direction: 270 , length: 50}},
  { id: 4, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: -25, y: 56, direction: 0 , length: 100}},
  { id: 6, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: 90, y: 57, direction: 180 , length: 100}},
  { id: 8, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: 112, y: 150, direction: 270 , length: 100}},
  { id: 10, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: -60, y: 150, direction: 270 , length: 100}},
  { id: 12, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: -47, y: 120, direction: 270 , length: 200}},
  { id: 14, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: -44, y: -220, direction: 90 , length: 200}},
  { id: 16, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: -44, y: -220, direction: 90 , length: 200}},
 // { id: 9, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: -52, y: -220, direction: 90 , length: 200}},
  { id: 18, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: -43, y: 120, direction: 270 , length: 200}},
  { id: 20, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: -45, y: -220, direction: 90 , length: 200}},
  { id: 22, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: -46, y: 120, direction: 270 , length: 200}},
  { id: 24, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: -55, y: 120, direction: 270 , length: 150}},
  { id: 26, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: 135, y: -60, direction: 90 , length: 150}},
//  { id: 15, openPosition: ref(0), closePosition : ref(0), remoteControl : ref(0), fault : ref(0) , arrow: { x: 138, y: 72, direction: 180 , length: 200}},
]);
//创建模拟量的初始值
const simulateValues = ref([
  //压力传感器
  { id: 74, value: ref(74 + 'MP') },
  { id: 75, value: ref(75 + 'MP') },
  { id: 81, value: ref(81 + 'MP') },
  { id: 82, value: ref(82 + 'MP') },
  { id: 83, value: ref(83 + 'MP') },
  { id: 84, value: ref(84 + 'MP') },
  { id: 85, value: ref(85 + 'MP') },
  { id: 86, value: ref(86 + 'MP') },

  //温度传感器
 /*  { id: 72, value: ref(111 + 'C°') },
  { id: 73, value: ref(73 + 'C°') }, */
  { id: 78, value: ref(78 + 'C°') },
  { id: 79, value: ref(79 + 'C°') },
  { id: 80, value: ref(80 + 'C°') },

  //电磁流量计
  { id: 69, value: ref(69 + 'm3/h') },
  { id: 70, value: ref(70 + 'm3/h') },
  { id: 71, value: ref(71 + 'm3/h') },
  //流量调节阀开度反馈
  { id: 66, value: ref(66) },
  { id: 67, value: ref(67) },
  { id: 68, value: ref(68) },
/*   
  { id: 76, value: ref(111) },
  { id: 77, value: ref(111) }, */
])
//开度给定控制设备
const controlValues = ref([
  { id: 63, value: ref() },
  { id: 64, value: ref() },
  { id: 65, value: ref() },
])

//报警设备
const warnings = ref([
  { id: 34, name: '水箱温度1', low: false, hight: false, err: false },
  { id: 36, name: '水箱温度2', low: false, hight: false, err: false },
  { id: 42, name: '水箱液位1', low: false, hight: false, err: false },
  { id: 44, name: '水箱液位2', low: false, hight: false, err: false }
])

const labelMap = {
  low: '低',
  high: '高',
  err: '故障'
};

// 当前活动弹窗列表
const activeWarnings = ref([])

// 冷却时间限制
const warningPopupCooldowns = reactive({
  low: 0,
  high: 0,
  err: 0
})
const popupDelay = 30000 // 30秒

const showDialog = (type, deviceName, id) => {
  const now = Date.now()
  const cooldownKey = `${type}-${id}`
  
  if (now - (warningPopupCooldowns[cooldownKey] || 0) < popupDelay) return
  warningPopupCooldowns[cooldownKey] = now

  // 动态计算位置
  const visibleCount = activeWarnings.value.length
  const top = 0 + (visibleCount % 3) * 130
  const left = 31 + Math.floor(visibleCount / 3) * 30 + '%'

  activeWarnings.value.push({
    id,
    type,
    deviceName,
    visible: true,
    topOffset: top,
    leftOffset: left
  })
}

const removeDialog = (warn) => {
  const index = activeWarnings.value.indexOf(warn)
  if (index !== -1) {
    activeWarnings.value.splice(index, 1)
  }
}

// 解析报警值 & 弹窗判断
const updatewarnValue = (id, newValue) => {
  const warning = warnings.value.find(w => w.id === id)
  if (warning) {
    // 反转二进制字符串方便低位访问
    const bits = parseInt(newValue, 16)
      .toString(2)
      .padStart(8, '0')
      .split('')
      .reverse()
    
    const triggers = {
      low: bits[0] === '1',
      high: bits[1] === '1',
      err: bits[2] === '1'
    }

    Object.entries(triggers).forEach(([type, isActive]) => {
      if (isActive && !warning[type]) {
        showDialog(type, warning.name, warning.id)
      }
      warning[type] = isActive
    })
  }
}

// 管理弹窗显示状态
const isPopupVisible = ref(false);

const recycleTwo = ref('');
recycleTwo.value = 0;
// 创建阀门的初始状态

//打开阀门状态
const showConfirm = (message) => {
  return new Promise((resolve) => {
    const modal = document.getElementById("confirmModal");
    const modalText = modal.querySelector("p");
    const yesBtn = document.getElementById("confirmYes");
    const noBtn = document.getElementById("confirmNo");

    modalText.textContent = message;
    modal.style.display = "flex";

    yesBtn.onclick = () => {
      modal.style.display = "none";
      resolve(true);
    };

    noBtn.onclick = () => {
      modal.style.display = "none";
      resolve(false);
    };
  });
};
const openSwitchfuwei = async (data) => {
  const confirmed = await showConfirm("确认要打开开关吗？");
  if (!confirmed) return;

  const data_status = {
    type: 6,
    deviceId: data.id,
    context: "01",
  };

  console.log("Sending data:", data.value);
  try {
    socket.send(data_status);
  } catch (error) {
    console.error("Error sending WebSocket message:", error);
  }
  showPopup();
};
const openSwitch = async (data) => {
  const confirmed = await showConfirm("确认要打开开关吗？");
  if (!confirmed) return;

  const data_status = {
    type: 1,
    deviceId: data.id,
    context: "02",
  };

  console.log("Sending data:", data.value);
  try {
    socket.send(data_status);
  } catch (error) {
    console.error("Error sending WebSocket message:", error);
  }
  showPopup();
};

const offSwitch = async (data) => {
  const confirmed = await showConfirm("确认要停止开关吗？");
  if (!confirmed) return;

  const data_status = {
    type: 1,
    deviceId: data.id,
    context: "04",
  };

  console.log("Sending data:", data.value);
  try {
    socket.send(data_status);
  } catch (error) {
    console.error("Error sending WebSocket message:", error);
  }
  showPopup();
};
const stopSwitch = async (data) => {
  const data_status = {
    type: 1,
    deviceId: data.id,
    context: "08",
  };
  console.log('Sending data:', data.value); // 调试信息
  try {
    socket.send(data_status);
  } catch (error) {
    console.error('Error sending WebSocket message:', error);
  }
  showPopup();
};
// 显示弹窗
const showPopup = () => {
  isPopupVisible.value = true;
  // 一秒后隐藏弹窗
  setTimeout(() => {
    isPopupVisible.value = false;
  }, 1000);
};

//处理接收到的 WebSocket 消息
bus.on('sendMsg', (rawData) => {
  try {
    // 1. 统一数据解析方式
    const parsedData = typeof rawData === 'string' ? JSON.parse(rawData) : rawData;
    
    // 2. 调试输出原始数据
    //console.log("收到原始数据:", parsedData);

    // 3. 类型检查和处理
    if (parsedData.type === 1) {
      const dataItems = Array.isArray(parsedData.data) ? parsedData.data : [parsedData.data];
      
      console.log("高压系统数据:", dataItems);
      
      // 4. 处理每个数据项
      dataItems.forEach(item => {
        const id = Number(item.id);
        const value = Number(item.data);
        
        // 5. 根据ID范围分配处理逻辑
        if (id < 27) {
          updateQFMeterValue(id, value);
        } else if (id >= 27 && id < 62) {
          updatewarnValue(id, value);
        } else if (id >= 66 && id < 69) {
          updateFlowMeterValue(id, value.toFixed(2));
        } else if (id >= 74 && id < 76) {
          updateFlowMeterValue(id, value.toFixed(2) + ' MPa');
        } else if (id >= 81 && id < 87) {
          updateFlowMeterValue(id, value.toFixed(2) + ' MPa');
        } else if (id >= 72 && id < 73) {
          updatetemMeterValue(value.toFixed(2));
        } else if (id >= 73 && id < 74) {
          updatetemMeterValue1(value.toFixed(2));
        } else if (id >= 78 && id < 81) {
          updateFlowMeterValue(id, value.toFixed(2) + ' ℃');
        } else if (id >= 69 && id < 72) {
          updateFlowMeterValue(id, value.toFixed(2) + ' m³/h');
        } else if (id >= 76 && id < 77) {
          updateliquidMeterValue(value.toFixed(1));
        } else if (id >= 77 && id < 78) {
          updateliquidMeterValue1(value.toFixed(1));
        }
      });
    }
  } catch (error) {
    console.error("数据处理失败:", error);
    console.error("错误数据内容:", rawData);
  }
});

//更新球阀状态
const updateQFMeterValue = (id, byteValue) => {
  const status = statuss.value.find(fm => fm.id === id);
  
  if (status) {
    // 直接转换为二进制字符串（不补零）
    const binaryString = parseInt(byteValue, 16).toString(2).padStart(8, '0');    
    // 解析二进制位（从高位到低位，索引0是最高位）
    status.openPosition = binaryString[1] === '1';   // 第1位（最高位）
    status.closePosition = binaryString[0] === '1';  // 第2位
        // 新增报警位
    status.openAlarm = binaryString[3] === '1';   // 开报警
    status.closeAlarm = binaryString[2] === '1';  // 关报警
  } 
};

// 更新模拟量的值
const updateFlowMeterValue = (id, newValue,state) => {
  const simulateValue = simulateValues.value.find(fm => fm.id === id);
  if (simulateValue) {
    simulateValue.value = newValue;
    //console.log(newValue);
  }
};

//模拟量参数设置
const parameterSettings = () => {
  if (selectedControl.value) {
    const value = inputValue.value;
    
    // 1. 检查是否是有效的数字
    if (isNaN(value) || value.trim() === "") {
      alert("请输入有效的数字！");
      return;
    }

    // 2. 转换为数字类型（因为 input 的值可能是字符串）
    const numValue = parseFloat(value);

    // 3. 检查是否在 0-100 范围内
    if (numValue < 0 || numValue > 100) {
      alert("请输入 0 到 100 之间的数字！");
      return;
    }

    // 4. 赋值并发送数据
    selectedControl.value.value = numValue; // 确保存储的是数字
    
    const data_dcf = {
      type: 1,
      deviceId: idDevice.value,
      context: inputValue.value, // 
    };
    
    socket.send(data_dcf); // 
    closeModal();
  }
};


// 更新液位计的值
const updateliquidMeterValue = (newValue) => {
  if (newValue) {
    currentLevel.value.level = newValue; // 更新 `currentLevel` 的值
  }   
};
// 更新温度计的值
const updatetemMeterValue = (newValue) => {
  if (newValue) {
    currenttem.value.temperature = newValue; // 更新 `currentLevel` 的值
  }
};
// 更新液位计的值
const updateliquidMeterValue1 = (newValue) => {
  if (newValue) {
    currentLevel1.value.level = newValue; // 更新 `currentLevel` 的值
  }   
};
// 更新温度计的值
const updatetemMeterValue1 = (newValue) => {
  if (newValue) {
    currenttem1.value.temperature = newValue; // 更新 `currentLevel` 的值
  }
};
</script>
<style  scoped lang="scss">
.fuel {
  background-image: url('/images/fuel.png');
  ::v-deep(.custom-warning-dialog) {
    color: red;
  }
  ::v-deep(.el-dialog) {
    position: absolute !important;
    border: 2px solid #000;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  ::v-deep(.el-dialog__header) {
    font-size: 18px;
    font-weight: bold;
    cursor: move;
  }
  /* ::v-deep(.el-dialog__body) {
    font-size: 16px;
    padding: 20px;
  } */
  ::v-deep(.el-dialog__footer) {
    text-align: right;
    padding: 10px 20px;
  }

  /* 确保对话框可见 */

  ::v-deep(.el-overlay) {
    pointer-events: none; /* 允许穿透点击 */
  }

  ::v-deep(.el-dialog.is-draggable) {
    pointer-events: auto;
  }
  
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .modal-content {
    background: white;
    padding: 20px 30px;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
  }

  .modal-buttons {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }
  .modal-buttons button {
    padding: 6px 12px;
    font-size: 14px;
  }
  .level-meter {
    position: absolute;
    text-align: center;
    left: 11.5%;
    top: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .meter-container {
    position: relative;
    width: 0.6rem;
    height: 14rem;
    border-radius: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    margin: 20px;
}


  .level-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgb(97, 134, 202);
  }

  .level-indicator {
    position: absolute;
    left: -230%;
    transform: translateY(50%);
    font-size: 16px;
    width: 75px;
    color: blue;
    display: flex; /* 使用 flex 确保文字和单位在同一行 */
    align-items: center; /* 保证单位和数字垂直居中对齐 */
  }

  .level-limit {
    position: absolute;
    width: 75px;
    left: 100%;
    font-size: 14px;
    color: #000;
    display: flex; /* 使用 flex 确保文字和单位在同一行 */
    align-items: center; /* 保证单位和数字垂直居中对齐 */
  }

  .top-limit {
    top: -20px; /* 最高液位显示在液位计的顶部上方 */
  }

  .bottom-limit {
    bottom: -20px; /* 最低液位显示在液位计的底部下方 */
  }

  .level-limits-right {
    position: relative;;
    top: 0px;
    left: -160%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 258px;
    color: red;
    padding-left: 10px;
  }

  .high-limit, .low-limit {
    font-size: 14px;
  }
  .tem-meter {
    position: absolute;
    text-align: center;
    left: 16.5%;
    top: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tem-container {
    position: relative;
    width: 0.6rem;
    height: 14rem;
    border-radius: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    margin: 20px;
  }

  .tem-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: orange;
  }

  .tem-indicator {
    position: absolute;
    left: 110%;
    transform: translateY(50%);
    font-size: 16px;
    width: 75px;
    color: green;
  }

  .tem-limit {
    position: absolute;
    width: 75px;
    left: 100%;
    font-size: 14px;
    color: #000;
    display: flex; /* 使用 flex 确保文字和单位在同一行 */
    align-items: center; /* 保证单位和数字垂直居中对齐 */
  }

  .top-limit {
    top: -20px; /* 最高温度显示在液位计的顶部上方 */
  }

  .bottom-limit {
    bottom: -20px; /* 最低温度显示在液位计的底部下方 */
  }

  .tem-limits-right {
    position: relative;;
    top: 0px;
    left: -250%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 258px;
    padding-left: 10px;
  }

  .high-limit, .low-limit {
    font-size: 14px;
    color: red;
  }
  .level-meter-right {
    position: absolute;
    text-align: center;
    left: 63.5%;
    top: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .meter-container-right {
    position: relative;
    width: 0.6rem;
    height: 14rem;
    border-radius: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    margin: 20px;
}


  .level-bar-right {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgb(97, 134, 202);
  }

  .level-indicator-right {
    position: absolute;
    left: -230%;
    transform: translateY(50%);
    font-size: 16px;
    width: 75px;
    color: blue;
    display: flex; /* 使用 flex 确保文字和单位在同一行 */
    align-items: center; /* 保证单位和数字垂直居中对齐 */
  }

  .level-limit-right {
    position: absolute;
    width: 75px;
    left: 100%;
    font-size: 14px;
    color: #000;
    display: flex; /* 使用 flex 确保文字和单位在同一行 */
    align-items: center; /* 保证单位和数字垂直居中对齐 */
  }

  .top-limit-right {
    top: -20px; /* 最高液位显示在液位计的顶部上方 */
  }

  .bottom-limit-right {
    bottom: -20px; /* 最低液位显示在液位计的底部下方 */
  }

  .level-limits-right-right {
    position: relative;;
    top: 0px;
    left: -160%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 258px;
    color: red;
    padding-left: 10px;
  }

  .high-limit-right, .low-limit-right {
    font-size: 14px;
  }
  .tem-meter-right {
    position: absolute;
    text-align: center;
    left: 69%;
    top: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tem-container-right {
    position: relative;
    width: 0.6rem;
    height: 14rem;
    border-radius: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    margin: 20px;
  }

  .tem-bar-right {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: orange;
  }

  .tem-indicator-right {
    position: absolute;
    left: 110%;
    transform: translateY(50%);
    font-size: 16px;
    width: 75px;
    color: green;
  }

  .tem-limit-right {
    position: absolute;
    width: 75px;
    left: 100%;
    font-size: 14px;
    color: #000;
    display: flex; /* 使用 flex 确保文字和单位在同一行 */
    align-items: center; /* 保证单位和数字垂直居中对齐 */
  }

  .top-limit-right {
    top: -20px; /* 最高温度显示在液位计的顶部上方 */
  }

  .bottom-limit-right {
    bottom: -20px; /* 最低温度显示在液位计的底部下方 */
  }

  .tem-limits-right-right {
    position: relative;;
    top: 0px;
    left: -250%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 258px;
    padding-left: 10px;
  }

  .high-limit-right, .low-limit-right {
    font-size: 14px;
    color: red;
  }
  .on-off {
    .icon {
      width: 0vw;
      height: 0vh;
    }
    .status {
      border-radius: 4px;
      display: flex;
      /* 使用 flex 确保文字和单位在同一行 */
      border: 3px solid hsl(0, 0%, 84%);
      /* 添加边框 */
    }

    .default {
      width: 15px;
      height: 20px;
      color: rgb(255, 255, 255);
      font-size: 10px;
      display: flex;
      margin: 1px;
      text-align: center;
      align-items: center;
      justify-content: center;
      background-color: #abaaaa;
      cursor: pointer;
    }
    .default1 {
      width: 60px;
      height: 30px;
      color: rgb(255, 255, 255);
      font-size: 20px;
      display: flex;
      margin: 1px;
      text-align: center;
      align-items: center;
      justify-content: center;
      background-color: green;
      cursor: pointer;
    }
    .abnormal {
      width: 10px;
      height: 20px;
      color: rgb(147, 147, 147);
      font-size: 25px;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
    }

    .active {
      background-color: green;
      /* 激活状态为绿色 */
    }

    .active_ {
      color: red;
      /* 故障信号为红色 */
    }

    .active_font {
      border: 3px solid green;
    }
    .flashing-arrow {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: flex-start; /* 使箭头头部位于起点 */
      transform-origin: left center; /* 旋转基于左侧 */
      animation: flash 1s infinite; /* 闪烁动画 */
      
    }

    .flashing-arrow::before {
      content: ''; /* 箭头头部 */
      width: 0;
      height: 0;
      border-right: 20px solid blue; /* 箭头头部颜色，改为指向右侧 */
      border-top: 8px solid transparent; /* 上侧透明 */
      border-bottom: 8px solid transparent; /* 下侧透明 */
      margin-right: 0px; /* 调整箭头头部与直线的距离 */
    }

    .flashing-arrow::after {
      content: ''; /* 箭头的直线部分 */
      display: block;
      height: 5px; /* 直线厚度 */
      background-color: blue; /* 直线颜色 */
      flex-grow: 1; /* 使直线部分动态填充 */
    }

    @keyframes flash {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.2;
      }
    }
    .fuwei0 {
      /* 设置位置 */
      border-radius: 4px;
      display: flex;
      /* 使用 flex 确保文字和单位在同一行 */
      border: 3px solid hsl(0, 0%, 84%);
      /* 添加边框 */
      position: fixed !important;
      top: 10%;
      left: 90%;
    }
    .status0 {
      /* 设置位置 */
      position: fixed !important;      
      top: 10.5%; 
      left: 30.5%; 
    }
    .status2 {
      /* 设置位置 */
      position: fixed !important; 
      top: 10.5%; 
      left: 75.2%;  
    }
    .status4 {
      /* 设置位置 */
      position: fixed !important;  
      top: 14.5%;  
      left: 34.8%; 
    }
    .status6 {
      /* 设置位置 */
      position: fixed !important;
      top: 14.5%; 
      left: 70%; 
    }
    .status8 {
      /* 设置位置 */
      position: fixed !important; 
      top: 25%;  
      left: 36%;   
    }
    .status10 {
      /* 设置位置 */
      position: fixed !important;
      top: 25%; 
      left: 70%; 
    }
    .status12 {
      /* 设置位置 */
      position: fixed !important; 
      top: 73.5%;   
      left: 46.3%;  
    }
    .status14 {
      /* 设置位置 */
      position: fixed !important; 
      top: 89.6%;  
      left: 85.5%; 
    }
    .status16 {
      /* 设置位置 */
      position: fixed !important;
      top: 89.6%;   
      left: 75.9%; 
    }
    .status18 {
      /* 设置位置 */
      position: fixed !important;
      top: 73.6%;   
      left: 36.6%;  
    }
    .status20 {
      /* 设置位置 */
      position: fixed !important;
      top: 89.6%;   
      left:66.4%; 
    }
    .status22 {
      /* 设置位置 */
      position: fixed !important;
      top: 73.6%;   
      left: 27.2%; 
    }
    .status24 {
      /* 设置位置 */
      position: fixed !important;
      top: 42%;   
      left: 17.5%;  
    }
    .status26 {
      /* 设置位置 */
      position: fixed !important;
      top: 46%;   
      left: 87%;
    }
    .simulate-value {
      font-size: 15px;
      border-radius: 4px;
      color: rgb(60, 89, 165);
      border: 1px solid #abaaaa;
      /* 添加边框 */
      padding: 1.5px;
      /* 可选，增加内边距，让文本不紧贴边框 */
    }
    /* 增加模拟量显示的样式 */
    .simulate-value69 {
      position: fixed !important;
      top: 82.7%;
      left: 66.8%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }

    .simulate-value70 {
      position: fixed !important;
      top: 82.7%;
      left: 76%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }

    .simulate-value71 {
      position: fixed !important;
      top: 82.7%;
      left: 86%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }

    .simulate-value81 {
      position: fixed !important;
      top: 65%;
      left: 27.5%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value82 {
      position: fixed !important;
      top: 65%;
      left: 37%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }

    .simulate-value83 {
      position: fixed !important;
      top: 65%;
      left: 46.5%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }

    .simulate-value84 {
      position: fixed !important;
      top: 75.5%;
      left: 66.8%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value85 {
      position: fixed !important;
      top: 75.5%;
      left: 76.4%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value86 {
      position: fixed !important;
      top: 75.5%;
      left: 85.9%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value78 {
      position: fixed !important;
      top: 82.5%;
      left: 67%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }

    .simulate-value79 {
      position: fixed !important;
      top: 82.5%;
      left: 76.5%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }

    .simulate-value80 {
      position: fixed !important;
      top: 82.5%;
      left: 86%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }

    .simulate-value66 {
      position: fixed !important;
      top: 63%;
      left: 67%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }

    .simulate-value67 {
      position: fixed !important;
      top: 63%;
      left: 76.5%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }

    .simulate-value68 {
      position: fixed !important;
      top: 63%;
      left: 86%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }

    .simulate-value69 {
      position: fixed !important;
      top: 69%;
      left: 66.5%;
      font-size: 12px;
      color: #000;
    }
    .simulate-value70 {
      position: fixed !important;
      top: 69%;
      left: 76%;
      font-size: 12px;
      color: #000;
    }
    .simulate-value71 {
      position: fixed !important;
      top: 69%;
      left: 86%;
      font-size: 12px;
      color: #000;
    }
/*     .simulate-value54 {
      position: fixed !important;
      top: 30%;
      left: 29%;
      font-size: 12px;
      color: #000;
    }
    .simulate-value55 {
      position: fixed !important;
      top: 30%;
      left: 83%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    } */
    .simulate-value74 {
      position: fixed !important;
      top: 46%;
      left: 26%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value75 {
      position: fixed !important;
      top: 46%;
      left: 79%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
/*     .simulate-value58 {
      position: fixed !important;
      top: 38%;
      left: 28%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value59 {
      position: fixed !important;
      top: 38%;
      left: 83%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
 */
    .simulate-value63 {
      position: fixed !important;
      //background-color: red;
      width: 70px;
      height: 50px;
      top: 61.5%;
      left: 64.6%;
      font-size: 12px;
      color: #000;
      cursor: pointer; /* 鼠标悬停时显示为手型，提示可以点击 */
    }
    .simulate-value64 {
      position: fixed !important;
      //background-color: red;
      width: 70px;
      height: 50px;
      top: 61.5%;
      left: 73.9%;
      font-size: 12px;
      color: #000;
      cursor: pointer; /* 鼠标悬停时显示为手型，提示可以点击 */
    }
    .simulate-value65 {
      position: fixed !important;
      //background-color: red;
      width: 70px;
      height: 50px;
      top: 61.5%;
      left: 83.3%;
      font-size: 12px;
      color: #000;
      cursor: pointer; /* 鼠标悬停时显示为手型，提示可以点击 */
    }
    .input-container {
      margin-bottom: 10px;
    }

    input {
      border: none; /* 移除边框 */
    }
    .hight_water1 {
      position: fixed !important;
      top: 19.5%;
      left: 40%;
    }
    .hight_water2 {
      position: fixed !important;
      top: 19.5%;
      left: 66%;
    }
    .hight_water3 {
      position: fixed !important;
      top: 4%;
      left: 30%;
    }
    .hight_water4 {
      position: fixed !important;
      top: 4%;
      left: 76%;
    }
    .hight_water5 {
      position: fixed !important;
      top: 36.9%;
      left: 15%;
    }
    .hight_water6 {
      position: fixed !important;
      top: 37.8%;
      left: 88%;
    }
  }
}
</style>